<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<meta name="robots" content="noindex, nofollow">
<!-- Include CSS File Here -->

<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script>
			$(document).ready(function() {
		$("#register").click(function() {
		var name = $("#name").val();
		var email = $("#email").val();
		var country = $("#country").val();
		var city = $("#city").val();
		var password = $("#password").val();
		var cpassword = $("#cpassword").val();
		
		var patternForDigits = /^\d+$/;
		
		var patternForSpecialSymbols = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
		
		


		if (name == '' || email == '' || password == '' || cpassword == '' || country == '' || city == '') {
				alert("Please fill all fields...!!!!!!");
		} else if ((password.length) < 4) {
				alert("Password should atleast 4 character in length...!!!!!!");
		} else if (!(password).match(cpassword)) {
				alert("Your passwords don't match. Try again?");
		} else if ((name.length) < 2){
				alert("Enter name");
		} else if (email.indexOf("@") == -1){
				alert("Enter valid email");
		} else if (email.indexOf(".") == -1){
				alert("Enter valid email");
		} else if ((country.length) < 4){
				alert("enter valid country");
		} else if ((city.length) < 3){
				alert("enter valid city");
		} else if ((email.length) < 5){
				alert("enter valid email");
		} else if ((patternForDigits.test(name)) == true){
				alert("The name can not contain numbers");
		} else if ((patternForDigits.test(country)) == true){
				alert("The country can not contain numbers");
		} else if ((patternForDigits.test(city)) == true){
				alert("The city can not contain numbers");
		}  else if ((patternForSpecialSymbols.test(name)) == true){
				alert("The name can not contain special symbols");
		}  else if ((patternForSpecialSymbols.test(country)) == true){
				alert("The country can not contain special symbols");
		}  else if ((patternForSpecialSymbols.test(city)) == true){
				alert("The city can not contain special symbols");
		}  
		
		
		else {
			window.location.replace("congrat.html");
		}
		});
		});
</script>

<style>
			/* Below line is used for online Google font */
		@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
		h2{
		text-align: center;
		font-size: 24px;
		}
		hr{
		margin-bottom: 30px;
		}
		div.container{
		width: 960px;
		height: 610px;
		margin:50px auto;
		font-family: 'Droid Serif', serif;
		position:relative;
		}
		div.main{
		width: 320px;
		float:left;
		padding: 10px 55px 40px;
		background-color: rgba(187, 255, 184, 0.65);
		border: 15px solid white;
		box-shadow: 0 0 10px;
		border-radius: 2px;
		font-size: 13px;
		}
		input[type=text],[type=password] {
		width: 97.7%;
		height: 34px;
		padding-left: 5px;
		margin-bottom: 20px;
		margin-top: 8px;
		box-shadow: 0 0 5px #00F5FF;
		border: 2px solid #00F5FF;
		color: #4f4f4f;
		font-size: 16px;
		}
		label{
		color: #464646;
		text-shadow: 0 1px 0 #fff;
		font-size: 14px;
		font-weight: bold;
		}
		#register {
		font-size: 20px;
		margin-top: 15px;
		background: linear-gradient(#22abe9 5%, #36caf0 100%);
		border: 1px solid #0F799E;
		padding: 7px 35px;
		color: white;
		text-shadow: 0px 1px 0px #13506D;
		font-weight: bold;
		border-radius: 2px;
		cursor: pointer;
		width: 100%;
		}
		#register:hover{
		background: linear-gradient(#36caf0 5%, #22abe9 100%);
		}
</style>

</head>
<body>
<div class="container">
	<div class="main">

		<form class="form" method="post" action="#">
			<h2>Registration Form</h2>
			
			<label>Name :</label>
			<input type="text" name="dname" id="name">
			
			<label>Email :</label>
			<input type="text" name="demail" id="email">
			
			<label>Country: </label>
			<input type="text" name="dcountry" id="country">
			
			<label>City: </label>
			<input type="text" name="dcity" id="city">
			
			<label>Password :</label>
			<input type="password" name="password" id="password">
			
			<label>Confirm Password :</label>
			<input type="password" name="cpassword" id="cpassword">
			
			<input type="button" name="register" id="register" value="Register">
		</form>
	</div>
</body>
</html>